<template>
	<view class="appraise-box bg-white e-m-b-20 e-p-30" @tap="$goTo('/pages/nearby/store/info',  {id:storeId, step: 1})">
		<view class="c-333 e-font-32 e-flex e-m-b-30" v-if="storeInfo">
			<view class="e-flex-1">
				{{$t('nearby.用户评价')}}({{ storeInfo.evaluateCount > 999 ? '999+' : storeInfo.evaluateCount }})
			</view>
			<image class="img-32" src="/pages/systemPay/static/nearby/arrow.png" mode=""></image>
		</view>
		<view class="">
			<view class="e-p-30 e-flex e-flex-items-start"
				:style="[item.photos && item.photos.length > 0 ? {paddingBottom:0}: null ]"
				v-for="item in evaluationList" :key="item.id">
				<view class="nearby-store-evaluation__avatar e-flex">
					<load-image mode="aspectFill" size="60rpx" shape="circle" :src="item.customerHeaderImg">
						<template #error>
							<app-image mode="aspectFill" size="60rpx" shape="circle"
								src="default-headerImg.png"></app-image>
						</template>
					</load-image>
				</view>
				<view class="content e-flex-1">
					<view class="e-flex e-flex-between">
						<text class="e-font-34 ">{{ getNickName(item.customerNickName) }}</text>
						<view class="e-flex">
							<image class="img-32" v-for="items in item.averageScore" :key="items"
								src="/pages/systemPay/static/star1.png" />
							<view class="e-flex">
								<app-image size="32rpx" src="layout/basics/star_default.png"
									v-for="items in 5 - item.averageScore" :key="items"></app-image>

							</view>
						</view>
					</view>
					<view class="e-flex e-font-30 c-placeholder e-m-b-20 e-m-t-10">
						<view class="e-m-r-20">{{ item.createTime }}</view>
						<view>{{ item.skuSpec }}</view>
					</view>
					<view class="e-font-30 e-m-b-20">
						{{ item.content }}
					</view>
					<e-album :urls="item.photos?.map?.(item => $fullLink(item))||[]" singleSize="99"
						multipleSize="180rpx"></e-album>

					<view class="nearby-store-evaluation__reply-box e-m-t-18 e-font-24"
						v-if="item.hasStoreReply && item.contentStoreReply">
						{{ $t('common.商家回复') }}：{{ item.contentStoreReply }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	}
</script>

<script setup lang="ts">
	import type { NearbyStoreInfo, NearbyStoreGoodsEvaluateItem } from '@/common/request/api'

	const props = withDefaults(defineProps<{
		evaluationList : NearbyStoreGoodsEvaluateItem[]
		storeInfo : NearbyStoreInfo
		storeId : string
	}>(), {
	})


	const getNickName = (val : string) => {
		if (val.length === 11) {
			return val.substring(0, 3) + '****' + val.substring(val.length - 4)
		} else if (val.length <= 2) {
			return val.substring(0, 1) + '*'
		} else {
			return val.substring(0, 1) + '*' + val.substring(val.length - 1)
		}
	}
</script>

<style lang="scss" scoped>
	.appraise-box {
		border-radius: 20rpx;
	}

	.nearby-store-evaluation {
		&__tab-item {
			width: 156rpx;
			height: 60rpx;
			background: #ededed;
			border-radius: 30rpx;
			@include fontH(26, 60);
		}

		&__scroll {
			height: calc(100vh - 628rpx);

			scroll-view {
				height: 100%;
			}
		}

		&__avatar {
			flex: 0 0 80rpx;
			align-items: flex-start;
		}

		&__reply-box {
			padding: 14rpx 20rpx 20rpx;
			background: #ededed;
			border-radius: 10rpx;
			color: #989898;
		}
	}
</style>